<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <div id="fullscreen" class="_layout_main_">

      <!--搜索-->
      <a-form
          ref="defSearch"
          :model="search.def"
          :rules="search.defRules"
          layout="inline"
          class="_search_from_">

        <a-form-item label="菜单名称" name="name" class="_230w">
          <a-auto-complete
              v-model:value="search.def.name"
              placeholder="请输入菜单名称"
              :allowClear="true"
              :options="auto.name"
              @keyup.enter.prevent="queryPage_"
              @search="(value) => { searchAsync_( value, 'name' )}">
            <template #option="item">
              <div @click="searchSelect_(item.name,'name',item)"> {{ item.name }}</div>
            </template>
          </a-auto-complete>
        </a-form-item>

        <a-form-item label="访问地址" name="path" class="_230w">
          <a-auto-complete
              v-model:value="search.def.path"
              placeholder="请输入访问地址"
              :allowClear="true"
              :options="auto.path"
              @keyup.enter.prevent="queryPage_"
              @search="(value) => { searchAsync_( value, 'path' )}"
          >
            <template #option="item">
              <div @click="searchSelect_(item.path,'path',item)"> {{ item.path }}</div>
            </template>
          </a-auto-complete>
        </a-form-item>

        <a-form-item label="状态" name="menu_is_show" class="_180w">
          <a-select v-model:value="search.def.menu_is_show" placeholder="是否展示" :allowClear="true">
            <a-select-option v-for="(item,index) in option.menuIsSHow" :value=item.key>
              {{
                item.text
              }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="链接类型" name="link_type" class="_230w">
          <a-select v-model:value="search.def.link_type" placeholder="链接类型" :allowClear="true">
            <a-select-option v-for="(item,index) in option.menuLinkType" :value=item.key>
              {{
                item.text
              }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <div style="flex: 1 1 0;"/>

        <a-form-item style="margin-right: 0">
          <a-button type="primary" @click="queryPage_">查询</a-button>
          <a-button style="margin-left: 10px" @click="()=>{ resetForm_('defSearch'); }">重置</a-button>
        </a-form-item>
        <!--      <el-form-item>-->
        <!--        <el-button type="primary" @click="queryPage_">查询</el-button>-->
        <!--        <el-button @click="()=>{ resetForm_('searchForm'); queryPage_() }">重置</el-button>-->
        <!--      </el-form-item>-->
        <!--    </el-form>-->

      </a-form>

      <!--表格选项-->
      <div class="_tools_">
        <div style="color: rgba(0,0,0,.85);font-size: 16px;">查询表格</div>

        <div style="flex: 1 1 0"></div>

        <a-button type="primary" size="small" ghost @click="openDefAdd_(null)">新建</a-button>

        <a-divider type="vertical"/>

        <a-tooltip placement="top">
          <template #title>
            <span>批量删除</span>
          </template>
          <delete-outlined :style="{fontSize: '16px'}" @click="delDefDataS_"/>
        </a-tooltip>

        <a-tooltip placement="top">
          <template #title>
            <span>表格大小</span>
          </template>
          <a-dropdown :trigger="['click']">
            <setting-outlined :style="{fontSize: '16px'}" class="_magl14"/>
            <template #overlay>
              <a-menu v-model:selectedKeys="table.def.size" @click="(item)=>{table.def.size=item.key}">
                <a-menu-item v-for="(item,index) in option.tableSize" :key="item.key">
                  <div style="padding: 0 5px">
                    {{ item.text }}
                  </div>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>

        </a-tooltip>

        <a-tooltip placement="top">
          <template #title>
            <span>全 屏</span>
          </template>
          <fullscreen-outlined :style="{fontSize: '16px'}" class="_magl14" @click="fullScreen"/>
        </a-tooltip>
        <!--          <a style="margin-left: 10px">-->
        <!--            <file-add-outlined style="color: #1890FF;font-size: 10px;"/>-->
        <!--            新增</a>-->
        <!--          <a style="margin-left: 10px">-->
        <!--            <edit-outlined style="color: #1890FF;font-size: 10px;"/>-->
        <!--            编辑</a>-->
        <!--          <a style="margin-left: 10px;padding:2px;">-->
        <!--            <delete-outlined style="color: #1890FF;font-size: 10px;"/>-->
        <!--            删除</a>-->
      </div>

      <!--表格-->
      <a-table
          ref="defTable"
          rowKey="id"
          :pagination="false"
          :size="table.def.size"
          :columns="table.def.column"
          :data-source="table.def.data"
          :rowSelection="defRowSelection_()"
          @resizeColumn="(w, col) => {col.width = w;}">

        <!--表格内容-->
        <template #bodyCell="{ text, record, index, column  }">
          <!--目录-->
          <template v-if="column.dataIndex === 'name'">
            <component :is="$icons[record.icon]"
                       style="border: 1px solid #EEEEEE; border-radius: 999px;padding: 5px;font-size: 20px;margin-right: 5px"/>
            <span v-if="$icons[record.icon]">{{ text }}</span>
            <span v-else style="margin-left: 39px">{{ text }}</span>
          </template>

          <template v-if="column.dataIndex === 'path'">
            <span v-if="text">{{ text }}</span>
            <span v-else>#</span>
          </template>

          <template v-if="column.dataIndex === 'type'">
            <a-tag v-if="text==0" color="blue" style="border-radius: 100px">目 录</a-tag>
            <a-tag v-if="text==1" color="green" style="border-radius: 100px">菜 单</a-tag>
          </template>

          <template v-if="column.dataIndex === 'menu_is_show'">
            <a-tag v-if="text==0" color="blue" style="border-radius: 100px">展 示</a-tag>
            <a-tag v-if="text==1" color="orange" style="border-radius: 100px">隐 藏</a-tag>
          </template>

          <template v-if="column.dataIndex === 'link_type'">
            <a-tag v-if="text==0" color="blue" style="border-radius: 100px">非链接</a-tag>
            <a-tag v-if="text==2" color="pink" style="border-radius: 100px">内部链接</a-tag>
            <a-tag v-if="text==1" color="orange" style="border-radius: 100px">外部链接</a-tag>
          </template>

          <template v-if="column.dataIndex === 'level'">
            <a-tag
                :color="getLevelColor(text)"
                :style="{borderRadius: '100px'}">{{ text }}
            </a-tag>
          </template>

          <!--操作-->
          <template v-if="column.dataIndex === 'action'">
            <a v-if="record.type==0" @click="openDefAdd_(record)">新增</a>
            <a-divider v-if="record.type==0" type="vertical"/>
            <a @click="openDefEdit_(record)">编辑</a>
            <a-divider v-if="record.type==1" type="vertical"/>
            <a v-if="record.type==1" @click="openRes_(record)">功能</a>
            <a-divider type="vertical"/>
            <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="delDefDat(record)">
              <template #title>
                <p>是否执行删除操作</p>
              </template>
              <a>删除</a>
            </a-popconfirm>

          </template>

        </template>

      </a-table>

      <!--新增Dialog-->
      <a-modal
          title="新增菜单"
          width="70%"
          v-model:visible="show.addDef"
          :destroyOnClose="true"
          :maskClosable="false">

        <!--新增表单-->
        <a-form
            ref="defForm"
            :model="form.def.data"
            :rules="form.def.rules"
            :label-col="form.def.lc"
            :wrapper-col="form.def.wc">

          <!--父级菜单-->
          <a-form-item label="父级菜单" name="pname">
            <a-input v-model:value="form.def.data.pname" placeholder="请选择父级" disabled>
              <template #addonAfter>
                <search-outlined class="mHand" @click="this.show.selectPMenu =true"/>
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="当前层级" name="level">
            <a-input v-model:value="form.def.data.level" disabled/>
          </a-form-item>

          <a-divider/>

          <!--图标-->
          <a-form-item label="图标" name="icon" aline="center">
            <a-popover v-model:visible="show.selectIcon" placement="bottom" trigger="click" style="padding: 0">
              <component :is="$icons[form.def.data.icon]"
                         style="font-size: 40px;margin-right: 20px;padding:2px;border: 1px solid #EEEEEE"/>
              <a-button shape="circle" size="small">
                <template #icon>
                  <SearchOutlined/>
                </template>
              </a-button>

              <template #content style="padding: 0!important;">
                <Icon maxHeight="500px" style="background: #FFFFFF;width: 850px;height: 500px;"
                      @clickItem="(item)=>{form.def.data.icon=item.cName;show.selectIcon=false}"></Icon>
              </template>
            </a-popover>

            <a-button style="margin-left: 5px" v-if="form.def.data.icon" shape="circle" size="small"
                      @click="()=>{form.def.data.icon=null;show.selectIcon=false}">
              <template #icon>
                <CloseCircleOutlined/>
              </template>
            </a-button>

          </a-form-item>

          <a-form-item label="排序" name="sort">
            <a-input-number v-model:value="form.def.data.sort" :min="1" :max="99999"/>
          </a-form-item>

          <a-form-item label="菜单类型" name="type">
            <a-radio-group v-model:value="form.def.data.type">
              <a-radio value="0">目 录</a-radio>
              <a-radio value="1">菜 单</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="菜单状态" name="menu_is_show">
            <a-radio-group v-model:value="form.def.data.menu_is_show">
              <a-radio value="0">展示</a-radio>
              <a-radio value="1">隐藏</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="菜单名称" name="name">
            <a-input v-model:value="form.def.data.name" placeholder="请输入菜单名称" :allowClear="true"/>
          </a-form-item>

          <a-form-item label="国际化" name="ln_key">
            <a-input v-model:value="form.def.data.ln_key" placeholder="请输入国际化KEY" :allowClear="true">
            </a-input>
          </a-form-item>

          <a-form-item label="描述信息" name="des">
            <a-textarea show-count :maxlength="200" v-model:value="form.def.data.des" placeholder="请输入描述信息"
                        :rows="3"/>
          </a-form-item>

          <a-divider v-if="form.def.data.type==1"/>

          <a-form-item label="链接类型" name="link_type" v-if="form.def.data.type==1">
            <a-radio-group v-model:value="form.def.data.link_type">
              <a-radio value="0">非链接</a-radio>
              <a-radio value="2">内部链接</a-radio>
              <a-radio value="1">外部链接</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="访问地址" name="path" v-if="form.def.data.link_type==0 && form.def.data.type==1">
            <a-input v-model:value="form.def.data.path" placeholder="请输入访问地址" :allowClear="true"/>
          </a-form-item>

          <a-form-item label="链接地址" name="link_url" v-if="form.def.data.link_type!=0">
            <a-input v-model:value="form.def.data.link_url" placeholder="请输入链接地址" :allowClear="true"/>
          </a-form-item>

          <a-divider v-if="form.def.data.type==1"/>

          <a-form-item label="Tab视图" v-if="form.def.data.link_type!=1 && form.def.data.type==1">
            <a-radio-group v-model:value="form.def.data.tab_is_show">
              <a-radio value="0">展示</a-radio>
              <a-radio value="1">隐藏</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">

            <a-radio-group v-model:value="form.def.data.tab_icon_is_show" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">展示Icon</a-radio>
              <a-radio value="1">隐藏Icon</a-radio>
            </a-radio-group>
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">

            <a-radio-group v-model:value="form.def.data.tab_title_is_show" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">展示标题</a-radio>
              <a-radio value="1">隐藏标题</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">

            <a-radio-group v-model:value="form.def.data.tab_is_close" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">可关闭</a-radio>
              <a-radio value="1">不可关闭</a-radio>
            </a-radio-group>
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <a-radio-group v-model:value="form.def.data.tab_is_refresh" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">展示刷新图标</a-radio>
              <a-radio value="1">隐藏刷新图标</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-divider v-if="form.def.data.type==1"/>

          <a-form-item label="面包屑导航" v-if="form.def.data.link_type!=1 && form.def.data.type==1">
            <a-radio-group v-model:value="form.def.data.bre_is_show">
              <a-radio value="0">展示</a-radio>
              <a-radio value="1">隐藏</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.bre_is_show==0">
            <br v-if="form.def.data.bre_is_show==0">

            <a-radio-group v-model:value="form.def.data.bre_title_is_show" v-if="form.def.data.bre_is_show==0">
              <a-radio value="0">展示标题</a-radio>
              <a-radio value="1">隐藏标题</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.bre_is_show==0">
            <br v-if="form.def.data.bre_is_show==0">

            <a-radio-group v-model:value="form.def.data.bre_icon_is_show" v-if="form.def.data.bre_is_show==0">
              <a-radio value="0">展示Icon</a-radio>
              <a-radio value="1">隐藏Icon</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-divider/>


        </a-form>

        <!--底部按钮-->
        <template #footer>
          <a-button @click="show.addDef = false">取消</a-button>
          <a-button class="_magl10" @click="()=>{resetForm_('defForm')}">重置</a-button>
          <a-button class="_magl10" type="primary" @click="addDat()">保存</a-button>
        </template>

      </a-modal>

      <!--编辑Dialog-->
      <a-modal
          title="编辑菜单"
          width="70%"
          v-model:visible="show.editDef"
          :destroyOnClose="true"
          :maskClosable="false">

        <!--编辑表单-->
        <a-form
            ref="defForm"
            :model="form.def.data"
            :rules="form.def.rules"
            :label-col="form.def.lc"
            :wrapper-col="form.def.wc">

          <!--父级菜单-->
          <a-form-item label="父级菜单" name="pname">
            <a-input v-model:value="form.def.data.pname" placeholder="请选择父级" disabled>
              <template #addonAfter>
                <search-outlined class="mHand" @click="this.show.selectPMenu =true"/>
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="当前层级" name="level">
            <a-input v-model:value="form.def.data.level" disabled/>
          </a-form-item>
          <a-divider/>

          <!--图标-->
          <a-form-item label="图标" name="icon" aline="center">

            <a-popover v-model:visible="show.selectIcon" placement="bottom" trigger="click" style="padding: 0">
              <component :is="$icons[form.def.data.icon]"
                         style="font-size: 40px;margin-right: 20px;padding:2px;border: 1px solid #EEEEEE"/>
              <a-button shape="circle" size="small">
                <template #icon>
                  <SearchOutlined/>
                </template>
              </a-button>
              <template #content style="padding: 0!important;">
                <Icon maxHeight="500px" style="background: #FFFFFF;width: 850px;height: 500px;"
                      @clickItem="(item)=>{form.def.data.icon=item.cName;show.selectIcon=false}"></Icon>
              </template>

            </a-popover>

            <a-button style="margin-left: 5px" v-if="form.def.data.icon" shape="circle" size="small"
                      @click="()=>{form.def.data.icon=null;show.selectIcon=false}">
              <template #icon>
                <CloseCircleOutlined/>
              </template>
            </a-button>

          </a-form-item>

          <a-form-item label="排序" name="sort">
            <a-input-number v-model:value="form.def.data.sort" :min="1" :max="99999"/>
          </a-form-item>

          <a-form-item label="菜单类型" name="type">
            <a-radio-group v-model:value="form.def.data.type">
              <a-radio value="0">目 录</a-radio>
              <a-radio value="1">菜 单</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="菜单状态" name="menu_is_show">
            <a-radio-group v-model:value="form.def.data.menu_is_show">
              <a-radio value="0">展示</a-radio>
              <a-radio value="1">隐藏</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="菜单名称" name="name">
            <a-input v-model:value="form.def.data.name" placeholder="请输入菜单名称" :allowClear="true"/>
          </a-form-item>

          <a-form-item label="国际化" name="ln_key">
            <a-input v-model:value="form.def.data.ln_key" placeholder="请输入国际化KEY" :allowClear="true">
            </a-input>
          </a-form-item>


          <a-form-item label="描述信息" name="des">
            <a-textarea show-count :maxlength="200" v-model:value="form.def.data.des" placeholder="请输入描述信息"
                        :rows="3"/>
          </a-form-item>

          <a-divider v-if="form.def.data.type==1"/>

          <a-form-item label="链接类型" name="link_type" v-if="form.def.data.type==1">
            <a-radio-group v-model:value="form.def.data.link_type">
              <a-radio value="0">非链接</a-radio>
              <a-radio value="2">内部链接</a-radio>
              <a-radio value="1">外部链接</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="访问地址" name="path" v-if="form.def.data.link_type==0 && form.def.data.type==1">
            <a-input v-model:value="form.def.data.path" placeholder="请输入访问地址" :allowClear="true"/>
          </a-form-item>

          <a-form-item label="链接地址" name="link_url" v-if="form.def.data.link_type!=0">
            <a-input v-model:value="form.def.data.link_url" placeholder="请输入链接地址" :allowClear="true"/>
          </a-form-item>

          <a-divider v-if="form.def.data.type==1"/>

          <a-form-item label="Tab视图" v-if="form.def.data.link_type!=1 && form.def.data.type==1">
            <a-radio-group v-model:value="form.def.data.tab_is_show">
              <a-radio value="0">展示</a-radio>
              <a-radio value="1">隐藏</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">

            <a-radio-group v-model:value="form.def.data.tab_icon_is_show" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">展示Icon</a-radio>
              <a-radio value="1">隐藏Icon</a-radio>
            </a-radio-group>
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">

            <a-radio-group v-model:value="form.def.data.tab_title_is_show" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">展示标题</a-radio>
              <a-radio value="1">隐藏标题</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">

            <a-radio-group v-model:value="form.def.data.tab_is_close" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">可关闭</a-radio>
              <a-radio value="1">不可关闭</a-radio>
            </a-radio-group>
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <br v-if="form.def.data.link_type!=1 && form.def.data.tab_is_show==0">
            <a-radio-group v-model:value="form.def.data.tab_is_refresh" v-if="form.def.data.tab_is_show==0">
              <a-radio value="0">展示刷新图标</a-radio>
              <a-radio value="1">隐藏刷新图标</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-divider v-if="form.def.data.type==1"/>

          <a-form-item label="面包屑导航" v-if="form.def.data.link_type!=1 && form.def.data.type==1">
            <a-radio-group v-model:value="form.def.data.bre_is_show">
              <a-radio value="0">展示</a-radio>
              <a-radio value="1">隐藏</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.bre_is_show==0">
            <br v-if="form.def.data.bre_is_show==0">

            <a-radio-group v-model:value="form.def.data.bre_title_is_show" v-if="form.def.data.bre_is_show==0">
              <a-radio value="0">展示标题</a-radio>
              <a-radio value="1">隐藏标题</a-radio>
            </a-radio-group>

            <br v-if="form.def.data.bre_is_show==0">
            <br v-if="form.def.data.bre_is_show==0">

            <a-radio-group v-model:value="form.def.data.bre_icon_is_show" v-if="form.def.data.bre_is_show==0">
              <a-radio value="0">展示Icon</a-radio>
              <a-radio value="1">隐藏Icon</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-divider/>

        </a-form>

        <!--底部按钮-->
        <template #footer>
          <a-button @click="show.editDef = false">取消</a-button>
          <a-button class="_magl10" @click="()=>{resetForm_('defForm')}">重置</a-button>
          <a-button class="_magl10" type="primary" @click="editDefDat()">保存</a-button>
        </template>
      </a-modal>

      <!--选择父级菜单-->
      <a-modal
          :zIndex="1001"
          title="选择菜单"
          width="90%"
          v-model:visible="show.selectPMenu"
          :destroyOnClose="true"
          :maskClosable="false">

        <!--组件-->
        <SelectMenu
            ref="selectMenu"
            :type="'radio'"
            :defaultSelectKey="[]"
            :tableHeight="450"
            @clickGen="clickGen()"/>

        <!--底部按钮-->
        <template #footer>
          <a-button @click="show.selectPMenu = false">取消</a-button>
          <a-button class="_magl10" type="primary" @click="selectMenu()">确定</a-button>
        </template>

      </a-modal>

      <!--菜单功能列表-->
      <a-modal
          title="菜单功能"
          width="90%"
          v-model:visible="show.menuRes"
          :footer="false"
          :destroyOnClose="true"
          :maskClosable="false">

        <!--搜索-->
        <a-form
            ref="resSearch"
            layout="inline"
            :model="search.res"
            :rules="search.resRules"
            class="_dialog_search_from_">

          <a-form-item label="菜单名称" name="menuName" class="_210w">
            <a-input v-model:value="search.res.menuName" :allowClear="true" disabled></a-input>
          </a-form-item>

          <a-form-item label="功能名称" name="name" class="_270w">
            <a-input v-model:value="search.res.name" placeholder="请输入功能名称" :allowClear="true"
                     @keyup.enter.prevent="queryMenuRes_"
            ></a-input>
          </a-form-item>

          <a-form-item label="API地址" name="request_url" class="_270w">
            <a-input v-model:value="search.res.request_url" placeholder="请输入API地址" :allowClear="true"
                     @keyup.enter.prevent="queryMenuRes_"></a-input>
          </a-form-item>

          <div style="flex: 1 1 0;"/>

          <a-form-item style="margin-right: 0">
            <a-button type="primary" @click="queryMenuRes_()">查询</a-button>
            <a-button style="margin-left: 10px" @click="()=>{ resetForm_('resSearch'); }">重置</a-button>
          </a-form-item>

        </a-form>

        <a-divider/>

        <!--表格选项-->
        <div class="_dialog_tools_">

          <div style="color: rgba(0,0,0,.85);font-size: 16px;">查询表格</div>

          <div style="flex: 1 1 0"></div>

          <a-button type="primary" ghost size="small" @click="openResAdd_">新建</a-button>

          <a-divider type="vertical"/>

          <a-tooltip placement="top">
            <template #title>
              <span>批量删除</span>
            </template>
            <delete-outlined :style="{fontSize: '16px'}" @click="delResDataS_"/>
          </a-tooltip>

          <!--表格大小-->
          <a-tooltip placement="top">
            <template #title>
              <span>表格大小</span>
            </template>
            <a-dropdown :trigger="['click']">
              <setting-outlined :style="{fontSize: '16px'}" class="_magl14"/>
              <template #overlay>
                <a-menu v-model:selectedKeys="table.res.size" @click="(item)=>{table.res.size=item.key}">
                  <a-menu-item v-for="(item,index) in option.tableSize" :key="item.key">
                    <div style="padding: 0 5px">
                      {{ item.text }}
                    </div>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>

          </a-tooltip>

        </div>

        <!--表格-->
        <a-table
            ref="resTable"
            rowKey="id"
            :style="{height: 500+'px'}"
            :scroll="{ y: 500 }"
            :pagination="false"
            :size="table.res.size"
            :columns="table.res.column"
            :data-source="table.res.data"
            :rowSelection="resRowSelection_()"
            @resizeColumn="(w, col) => {col.width = w;}">

          <!--表格内容-->
          <template #bodyCell="{ text, record, index, column  }">

            <template v-if="column.dataIndex === 'name'">
              <a-tag color="default">
                <template #icon>
                  <trademark-circle-outlined/>
                </template>
                <span style="font-size: 16px"> {{ text }}</span>
              </a-tag>
            </template>

            <template v-if="column.dataIndex === 'api_info'">
              <a-tag v-for="e in JSON.parse(text)" color="default">
                <template #icon>
                  <trademark-circle-outlined/>
                </template>
                <span style="font-size: 16px"> {{ e.path }}</span>
              </a-tag>
            </template>

            <template v-if="column.dataIndex === 'action'">
              <a @click="openResEdit_(record)">编辑</a>
              <a-divider type="vertical"/>
              <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="delResDat(record)">
                <template #title>
                  <p>是否执行删除操作</p>
                </template>
                <a>删除</a>
              </a-popconfirm>

            </template>

          </template>

        </a-table>

      </a-modal>

      <!--新增菜单功能-->
      <a-modal
          title="新增菜单功能"
          width="70%"
          v-model:visible="show.addRes"
          :destroyOnClose="true"
          :maskClosable="false">

        <!--新增表单-->
        <a-form
            ref="resForm"
            :model="form.api.data"
            :rules="form.api.rules"
            :label-col="form.api.lc"
            :wrapper-col="form.api.wc">

          <a-form-item label="功能名称" name="name">
            <a-input v-model:value="form.api.data.name" placeholder="功能名称" :allowClear="true"/>
          </a-form-item>

          <a-form-item label="描述信息" name="des">
            <a-textarea show-count :maxlength="200" v-model:value="form.api.data.des" placeholder="请输入描述信息"
                        :rows="3"/>
          </a-form-item>

          <a-form-item label="排序" name="sort">
            <a-input-number v-model:value="form.api.data.sort"/>
          </a-form-item>

          <a-form-item label="选择API" name="api_name">
            <a-button shape="circle" size="middle">
              <template #icon>
                <SearchOutlined @click="show.selectAPI=true"/>
              </template>
            </a-button>
          </a-form-item>

          <a-form-item label=" " :colon="false">
            <!--表格-->
            <a-table
                ref="apiTable"
                rowKey="id"
                :pagination="false"
                :size="table.api.size"
                :columns="table.api.column"
                :data-source="table.api.data"
                @resizeColumn="(w, col) => {col.width = w;}">

              <template #bodyCell="{ text, record, index, column  }">

                <template v-if="column.dataIndex === 'name'">
                  {{ record.pname }}-{{ record.name }}
                </template>

                <template v-if="column.dataIndex === 'action'">
                  <a @click="table.api.data.splice(index,1)">删除</a>
                </template>

              </template>

            </a-table>
          </a-form-item>

        </a-form>

        <!--底部按钮-->
        <template #footer>
          <a-button @click="show.addRes = false">取消</a-button>
          <a-button class="_magl10" @click="()=>{resetForm_('resForm')}">重置</a-button>
          <a-button class="_magl10" type="primary" @click="addResDat()">保存</a-button>
        </template>

      </a-modal>

      <!--编辑菜单功能-->
      <a-modal
          title="编辑菜单功能"
          width="70%"
          v-model:visible="show.editRes"
          :destroyOnClose="true"
          :maskClosable="false">

        <!--编辑功能表单-->
        <a-form
            ref="resForm"
            :model="form.api.data"
            :rules="form.api.rules"
            :label-col="form.api.lc"
            :wrapper-col="form.api.wc"
            class="go_shadow go_radius">

          <a-form-item label="功能名称" name="name">
            <a-input v-model:value="form.api.data.name" placeholder="功能名称" :allowClear="true"/>
          </a-form-item>

          <a-form-item label="描述信息" name="des">
            <a-textarea show-count :maxlength="200" v-model:value="form.api.data.des" placeholder="请输入描述信息"
                        :rows="3"/>
          </a-form-item>

          <a-form-item label="排序" name="sort">
            <a-input-number v-model:value="form.api.data.sort"/>
          </a-form-item>

          <a-form-item label="选择API" name="api_name">
            <a-button shape="circle" size="middle">
              <template #icon>
                <SearchOutlined @click="show.selectAPI=true"/>
              </template>
            </a-button>
          </a-form-item>

          <a-form-item label=" " :colon="false">
            <!--表格-->
            <a-table
                ref="apiTable"
                rowKey="id"
                :pagination="false"
                :size="table.api.size"
                :columns="table.api.column"
                :data-source="table.api.data"
                @resizeColumn="(w, col) => {col.width = w;}">

              <template #bodyCell="{ text, record, index, column  }">

                <template v-if="column.dataIndex === 'name'">
                  {{ record.pname }}-{{ record.name }}
                </template>

                <template v-if="column.dataIndex === 'action'">
                  <a @click="table.api.data.splice(index,1)">删除</a>
                </template>

              </template>

            </a-table>
          </a-form-item>

        </a-form>

        <!--底部按钮-->
        <template #footer>
          <a-button @click="show.editRes = false">取消</a-button>
          <a-button class="_magl10" @click="()=>{resetForm_('resForm')}">重置</a-button>
          <a-button class="_magl10" type="primary" @click="editResDat">保存</a-button>
        </template>

      </a-modal>

      <!--选择API-->
      <a-modal
          :zIndex="1001"
          title="选择API"
          width="90%"
          v-model:visible="show.selectAPI"
          :destroyOnClose="true"
          :maskClosable="false">

        <!--组件-->
        <SelectAPI
            ref="selectAPI"
            :defaultSelectKey="[]"
            :tableHeight="450"/>

        <!--底部按钮-->
        <template #footer>
          <a-button @click="show.selectAPI = false">取消</a-button>
          <a-button class="_magl10" type="primary" @click="selectAPI()">确定</a-button>
        </template>

      </a-modal>
    </div>
  </div>
</template>

<script>

import {createVNode, defineComponent} from 'vue';
import screenfull from "screenfull";
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import Icon from "@/common/component/Icon.vue";
import SelectMenu from "@/common/component/system/SelectMenu.vue";
import SelectAPI from "@/common/component/system/SelectAPI.vue";
import Breadcrumb from "@/common/layout/Breadcrumb.vue";

export default defineComponent({
  name: 'SysMenu',

  components: {Breadcrumb, SelectMenu, SelectAPI, Icon},

  mounted() {
    //////console.log(this.$route.path, ">>>>>>mounted")

    this.queryPage_()

    //全局监听-刷新
    this.$event.$on('refresh', (data) => {
      if ('/system/menu' == data['path']) {
        ////////console.log(this.$route.path, ">>>执行刷新界面>>>", data)
      }
    })

  },

  data() {

    return {
      //开关
      show: {
        //
        addDef: false,
        editDef: false,
        //
        editRes: false,
        addRes: false,
        menuRes: false,
        selectPMenu: false,
        selectAPI: false,
        selectIcon: false,
      },

      //搜索
      search: {

        //默认搜索
        def: {
          name: "",
          path: "",
          link_type: undefined,
          menu_is_show: undefined,
        },
        defRules: {},

        //功能搜索
        res: {
          menuId: "",
          menuName: "",
          name: undefined,
          api_name: undefined,
          request_url: undefined,
          type: undefined,
        },
        resRules: {},
      },

      //分页
      page: {

        //默认分页
        def: {
          current: 1,
          size: 10,
          total: 10,
          options: ['10', '30', '50', '100', '200', '500'],
          type: 'small',
          sizeChange: (current, pageSize) => {
            this.page.current = current;
            this.page.size = pageSize;
            this.queryPage_()
          },
          currentChange: (current) => {
            this.page.current = current
            this.queryPage_()
          }
        }
      },

      //表单
      form: {

        //默认表单
        def: {
          data: {},
          lc: {span: 3},
          wc: {span: 19},
          //(初始化/重置)Data
          resetData: {
            des: null,
            link_url: null,
            ln_key: null,
            pname: '#',
            type: '0',
            level: '1',
            link_type: "0",
            pid: '0',
            sort: 100,
            menu_is_show: "0",
            tab_is_show: "0",
            tab_is_close: "0",
            tab_is_refresh: "0",
            tab_title_is_show: "0",
            tab_icon_is_show: "1",
            bre_is_show: "0",
            bre_title_is_show: "0",
            bre_icon_is_show: "1",
          },
          rules: {
            link_type: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            pname: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            level: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            menu_is_show: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            link_url: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            sort: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            name: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            path: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            type: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
          },
        },

        //功能表单
        api: {
          data: {},
          rules: {
            sort: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            name: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            path: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            type: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            api_info: [],
          },
          lc: {span: 4},
          wc: {span: 16},
          searchRules: {},
          //(初始化/重置)Data
          resetData: {
            name: null,
            type: "1",
            des: null,
            sort: 100,
            api_info: [],
          },
        },
      },

      //表格
      table: {

        //默认表格
        def: {
          size: 'middle',
          data: [],
          column: [
            {title: '名称', dataIndex: 'name', resizable: true, width: 220},
            {title: '访问地址', dataIndex: 'path', resizable: true, width: 320},
            {title: '类型', dataIndex: 'type', resizable: true, align: 'center', width: 130},
            {title: '状态', dataIndex: 'menu_is_show', resizable: true, align: 'center', width: 130},
            {title: '链接类型', dataIndex: 'link_type', resizable: true, align: 'center', width: 130},
            {title: '排序', dataIndex: 'sort', resizable: true, align: 'center', width: 100},
            {title: '层级', dataIndex: 'level', resizable: true, align: 'center', width: 100},
            {title: '操作', dataIndex: 'action', align: 'center', width: 300},
          ],
          selectKey: [],
          selectRow: [],
        },

        //功能表格
        res: {
          size: 'middle',
          data: [],
          column: [
            {title: '功能名称', dataIndex: 'name', resizable: true, align: 'center', ellipsis: true},
            {title: 'API地址', dataIndex: 'api_info', resizable: true, align: 'center', ellipsis: true},
            {title: '功能描述', dataIndex: 'des', resizable: true, align: 'center', ellipsis: true},
            {title: '排序', dataIndex: 'sort', resizable: true, align: 'center', ellipsis: true},
            {title: '操作', dataIndex: 'action', align: 'center', width: 150},
          ],
          selectKey: [],
          selectRow: [],
        },

        //API
        api: {
          size: 'middle',
          data: [],
          column: [
            {title: 'API(ID)', dataIndex: 'id',},
            {title: 'API名称', dataIndex: 'name'},
            {title: 'API地址', dataIndex: 'path'},
            {title: '操作', dataIndex: 'action'},
          ],
          selectKey: [],
          selectRow: [],
        },


      },

      //自动完成
      auto: {
        name: [],
      },

      //option选项
      option: {
        menuRes: [
          {key: '0', text: '按钮'},
          {key: '1', text: '非按钮'},
        ],
        tableSize: [
          {key: 'default', text: '大号'},
          {key: 'middle', text: '中号'},
          {key: 'small', text: '小号'},
        ],
        menuIsSHow: [
          {key: '0', text: '展示',},
          {key: '1', text: '隐藏'},
        ],
        menuLinkType: [
          {key: '0', text: '非链接'},
          {key: '1', text: '外部链接'},
          {key: '2', text: '内部链接'},
        ]
      },

    };

  },

  methods: {

    //选择API
    selectAPI() {

      if (this.$refs.selectAPI.table.defSelectRow.length == 0) {
        this.$message.warning("请至少勾选一条数据")
        return
      }
      //添加到指定父级之下
      let rows = JSON.parse(JSON.stringify(this.$refs.selectAPI.table.defSelectRow))

      // this.form.api.data.api_id = row.id;
      // this.form.api.data.api_name = row.pname + '-' + row.name;
      // this.form.api.data.api_path = row.path;
      this.table.api.data = rows.filter(e => {
        return e.pid != 0
      })
      this.show.selectAPI = false;
    },

    //选择父级菜单
    selectMenu() {
      ////console.log(this.$refs.selectMenu.table.defSelectRow)
      let item = this.$refs.selectMenu.table.defSelectRow[0]

      if (!item) {
        this.$message.warning("请至少勾选一条数据")
        return
      }
      //添加到指定父级之下
      let row = JSON.parse(JSON.stringify(item))
      this.form.def.data.pid = row.id;
      this.form.def.data.pname = row.name;
      this.form.def.data.level = row.level * 1 + 1;
      this.show.selectPMenu = false;
    },

    //菜单选择根目录
    clickGen() {
      this.form.def.data.pid = "0";
      this.form.def.data.pname = "#";
      this.form.def.data.level = "1";
      this.show.selectPMenu = false;
    },

    //查询数据
    queryPage_() {

      let param = {
        ...this.search.def
      }

      this.$http.post('/system/menu/page', param).then((res) => {
        if (res.status) {
          this.table.def.data = this.$kit.getTree(res.data)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //resData
    queryMenuRes_() {

      let param = {
        ...this.search.res
      }

      this.$http.post('/system/menu/funList', param).then((res) => {
        if (res.status) {
          this.table.res.data = res.data
        } else {
          this.$message.warning(res.message)
        }
      })

    },

    //自动完成查询
    searchAsync_(str, type) {
      // ////////////console.log("searchAsync_---" + str + '---' + type)
      this.$http.post('/system/menu/searchInput', {[type]: str}).then((res) => {
        this.auto[type] = res.data
        ////////////console.log(this.auto)
      })
    },

    //input异步查询-点击事件
    searchSelect_(value, type, item) {
      this.search.def[type] = value
    },

    //执行新增
    addDat() {
      this.$refs.defForm
          .validate()
          .then(() => {
            this.$http.post("/system/menu/add", this.form.def.data).then((res) => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryPage_()
                this.show.addDef = false
              } else {
                this.$message.warning(res.message)
              }
            })
          })
          .catch(error => {
            this.$message.warning("存在错误，请检查表单填写情况。", 2)
          });
    },
    //执行新增
    addResDat() {
      this.$refs.resForm
          .validate()
          .then(() => {
            let api_info = []
            this.table.api.data.filter(e => {
              let e_ = {}
              e_.id = e.id
              e_.name = e.name
              e_.pname = e.pname
              e_.path = e.path
              api_info.push(e_)
            })
            this.form.api.data.api_info = api_info
            this.$http.post("/system/menu/funAdd", this.form.api.data).then((res) => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryMenuRes_()
                this.show.addRes = false
              } else {
                this.$message.warning(res.message)
              }
            })

          })
          .catch(error => {
            this.$message.warning("存在错误，请检查表单填写情况。", 2)
          });
    },

    //执行编辑
    editDefDat() {
      this.$refs.defForm
          .validate()
          .then(() => {
            delete this.form.def.data['children']
            this.$http.post("/system/menu/edit", this.form.def.data).then(res => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryPage_()
                this.show.editDef = false
              } else {
                this.$message.warning(res.message)
              }
            })
          }).catch(error => {
        this.$message.warning("存在错误，请检查表单填写情况。", 2)

      });
    },
    //执行菜单功能编辑
    editResDat() {
      this.$refs.resForm
          .validate()
          .then(() => {
            //拼装api_info
            let api_info = []
            this.table.api.data.filter(e => {
              let e_ = {}
              e_.id = e.id
              e_.name = e.name
              e_.pname = e.pname
              e_.path = e.path
              api_info.push(e_)
            })
            this.form.api.data.api_info = api_info

            this.$http.post("/system/menu/funEdit", this.form.api.data).then(res => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryMenuRes_()
                this.show.editRes = false
              } else {
                this.$message.warning(res.message)
              }
            })
          }).catch(error => {
        this.$message.warning("存在错误，请检查表单填写情况。", 2)
      });
    },

    //执行删除
    delDefDat(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.$http.post("/system/menu/del", {ids: [row.id]}).then((res) => {
        if (res.status) {
          this.$message.success(res.message)
          this.queryPage_()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //执行删除
    delResDat(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.$http.post("/system/menu/funDel", {ids: [row.id]}).then((res) => {
        if (res.status) {
          this.$message.success(res.message)
          this.queryMenuRes_()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //批量删除
    delDefDataS_() {
      let keys = this.table.def.selectKey;
      if (keys.length === 0) {
        this.$message.warn("请至少勾选一项", 1)
        return
      }

      Modal.confirm({
        title: '是否确定删除?',
        icon: createVNode(ExclamationCircleOutlined),
        content: `已勾选${keys.length}条数据`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.$http.post("/system/menu/funDel", {ids: keys}).then((res) => {
            if (res.status) {
              this.$message.success(res.message)
              this.queryPage_()
            } else {
              this.$message.warning(res.message)
            }
          })
        },
        onCancel: () => {
          this.$message.warning("操作已取消", 1)
        },
      });

    },
    //批量删除
    delResDataS_() {
      let keys = this.table.res.selectKey;
      if (keys.length === 0) {
        this.$message.warn("请至少勾选一项", 1)
        return
      }

      Modal.confirm({
        title: '是否确定删除?',
        icon: createVNode(ExclamationCircleOutlined),
        content: `已勾选${keys.length}条数据`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.$http.post("/system/menu/funDel", {ids: keys}).then((res) => {
            if (res.status) {
              this.$message.success(res.message)
              this.queryMenuRes_()
            } else {
              this.$message.warning(res.message)
            }
          })
        },
        onCancel: () => {
          this.$message.warning("操作已取消", 1)
        },
      });

    },

    //打开新增
    openDefAdd_(obj) {
      this.show.addDef = true
      this.resetDefDat()
      //随便任意层级新增
      if (!obj) {
        this.form.def.data.pid = "0";
        this.form.def.data.pname = "#";
        return
      }

      //添加到指定父级之下
      let row = JSON.parse(JSON.stringify(obj))
      ////////////console.log(row)
      this.form.def.data.pid = row.id;
      this.form.def.data.pname = row.name;
      this.form.def.data.level = row.level * 1 + 1;
      this.form.def.data.sort = row.sort * 1 + 10;
    },
    //打开新增
    openResAdd_(obj) {
      this.resetResDat()
      this.form.api.data.menu_id = this.search.res.menuId
      this.show.addRes = true
    },

    //打开编辑
    openDefEdit_(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.show.editDef = true
      this.form.def.data = row;
    },
    //打开编辑
    openResEdit_(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.show.editRes = true
      this.form.api.data = row;
      this.table.api.data = JSON.parse(row.api_info);
    },

    //打开功能列表
    openRes_(obj) {
      this.resetResDat();

      this.search.res.menuId = obj.id
      this.search.res.menuName = obj.name

      this.queryMenuRes_();

      this.show.menuRes = true;
    },

    //执行选择菜单
    selectPMenu(obj) {
      //根访问地址
      if (!obj) {
        this.form.def.data.pid = "0";
        this.form.def.data.pname = "#";
        this.form.def.data.level = "1";
        this.show.selectPMenu = false;
        return
      }

      //添加到指定父级之下
      let row = JSON.parse(JSON.stringify(obj))
      this.form.def.data.pid = row.id;
      this.form.def.data.pname = row.name;
      this.form.def.data.level = row.level * 1 + 1;
      this.show.selectPMenu = false;
    },

    //重置表单
    resetForm_(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields()
      }
    },

    //初始化表单
    resetDefDat() {
      this.form.def.data = JSON.parse(JSON.stringify(this.form.def.resetData))
    },
    //初始化表单
    resetResDat() {
      this.form.api.data = JSON.parse(JSON.stringify(this.form.api.resetData))
      this.table.api.data = []
    },

    //全屏
    fullScreen() {
      let element = document.getElementById("fullscreen")
      if (screenfull.isEnabled) {
        screenfull.request(element)
      }
      screenfull.toggle()
    },

    getLevelColor(text) {
      if (text == 1) return '#006d75'
      if (text == 2) return '#13c2c2'
      if (text == 3) return '#52c41a'
      if (text == 4) return '#69c0ff'
      return '#bae7ff'
    },
    //表格多选
    defRowSelection_() {
      return {
        type: "checkbox",
        checkStrictly: false,
        preserveSelectedRowKeys: false,//翻页后保留选中状态
        selectedRowKeys: this.table.def.selectKey,
        onChange: (selectedRowKeys, selectedRows) => {
          ////console.log("onChange")
          this.table.def.selectKey = selectedRowKeys
          this.table.def.selectRow = selectedRows
        },
        onSelect: (record, selected, selectedRows) => {
          ////console.log("onSelect")
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          ////console.log("onSelectAll")
        },
      }
    },
    //表格多选
    resRowSelection_() {
      return {
        type: "checkbox",
        checkStrictly: false,
        preserveSelectedRowKeys: false,//翻页后保留选中状态
        selectedRowKeys: this.table.res.selectKey,
        onChange: (selectedRowKeys, selectedRows) => {
          this.table.res.selectKey = selectedRowKeys
          this.table.res.selectRow = selectedRows
        },
        onSelect: (record, selected, selectedRows) => {
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
        },
      }
    },
  }
});
</script>

<style lang="less">

</style>

<style scoped lang="less">

</style>
